<!--
 * @Autor: dingxiaolin
 * @Date: 2022-09-20 10:46:46
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2022-09-20 10:47:18
-->
<template>
  <view class="alarm">
    <u-tabs class="tab" :list="shipNameList" @click="handleShipClick"></u-tabs>
    <view class="grid">
      <view class="row">
        <view v-for="item in alarmTypeList" :key="item.icon" class="col">
          <view
            :class="['item', item.alarmTypeName.length > 6 ? 'pt6' : '']"
            @click="handleJump(item)"
          >
            <view :class="['iconfont', item.memo, 'icon']"></view>
            <text
              :class="[
                'grid-text',
                item.alarmTypeName.length > 6 ? 'extend' : '',
              ]"
              >{{ item.alarmTypeName }}</text
            >
            <u-badge
              :absolute="true"
              :offset="[0, 0]"
              max="99"
              :value="item.num"
            ></u-badge>
          </view>
        </view>
      </view>
    </view>
    <view class="clear-box">
      <view class="clear" @click="handleUnReadNumClear"> 清除未读 </view>
    </view>
    <view class="video" v-if="shipVideoList.length > 0">
      <view class="title">船舶视频</view>
      <u-row justify="space-between" gutter="10">
        <u-col span="6" v-for="item in shipVideoList" :key="item.linkId">
          <view class="item_name">{{ item.cameraName }}</view>
          <video
            id="myVideo"
            class="item_video"
            :src="item.hlsUrl.replace(
                'http://10.2.200.9:83',
                'http://101.35.194.154:83'
              ) "
            controls
            :show-progress="false"
          ></video>
          <!-- .replace(
                'http://10.2.200.9:83',
                'http://101.35.194.154:83'
              ) -->
        </u-col>
      </u-row>
    </view>
    <view class="video" v-if="shoreVideoList.length > 0">
      <view class="title">岸基视频</view>
      <u-row justify="space-between" gutter="10">
        <u-col span="6" v-for="item in shoreVideoList" :key="item.linkId">
          <view class="item_name">{{ item.cameraName }}</view>
          <video
            id="myVideo"
            class="item_video"
            :src="item.hlsUrl.replace(
                'http://10.2.200.9:83',
                'http://101.35.194.154:83'
              ) "
            :show-progress="false"
            controls
          ></video>
          <!-- .replace(
                'http://10.2.200.9:83',
                'http://101.35.194.154:83'
              ) -->
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import {
  getShipList,
  getAlarmType,
  getUnReadNum,
  getShipVideo,
  getShoreVideoList,
  setClearUnReadNum,
} from '@/api/alarm'
import { shakeProof } from '@/utils/index'
export default {
  name: 'alarm',
  components: {},
  computed: {},
  data() {
    return {
      /** 船舶信息列表 */
      shipList: [],
      /**船舶名字列表 */
      shipNameList: [],
      /** 当前选中船舶下标 */
      currentIndex: 0,
      /** 预警类型 */
      alarmTypeList: [],
      /** 船舶视频列表 */
      shipVideoList: [],
      /** 岸边视频列表 */
      shoreVideoList: [],
    }
  },
  async mounted() {
    await this.getShipList()
    await this.getAlarmType()
    this.getUnReadNum()
    this.getShipVideo()
    this.getShoreVideoList()
  },
  methods: {
    shakeProof: shakeProof,
    /** 清除未读数量 */
    handleUnReadNumClear() {
      setClearUnReadNum({}).then((res) => {
        console.log(res)
        uni.showToast({
          title: '清除成功',
          icon: 'success',
          success: () => {
            this.getUnReadNum()
          },
        })
      })
    },
    /** 获取岸基视频 */
    getShoreVideoList() {
      getShoreVideoList({
        current: '1',
        size: '4',
        shipId: this.shipList[this.currentIndex]['shippingId'],
      }).then((res) => {
        console.log('anji', res)
        this.shoreVideoList = res.records
      })
    },
    /** 获取船舶视频 */
    getShipVideo() {
      console.log('video')
      getShipVideo({
        current: '1',
        size: '4',
        shipId: this.shipList[this.currentIndex]['shippingId'],
      }).then((res) => {
        console.log('ship-video', res)
        this.shipVideoList = res.records
      })
    },
    /** 获取未读数量 */
    getUnReadNum() {
      getUnReadNum({
        shipMmsi: this.shipList[this.currentIndex]['shipMmsi'],
      }).then((res) => {
        console.log('unread', res)
        this.alarmTypeList.map((alarm, index) => {
          if (alarm.alarmTypeName === '全部') {
            this.$set(
              this.alarmTypeList[index],
              'num',
              Object.values(res).reduce((a, b) => a + b)
            )
            return
          }
          this.$set(this.alarmTypeList[index], 'num', res[alarm.typeId])
        })
      })
    },
    /** 获取预警类型 */
    getAlarmType() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      })
      return getAlarmType({}).then((res) => {
        console.log('type', res)
        res.push({
          alarmTypeName: '全部',
          icon: '',
        })
        this.alarmTypeList = res
        uni.hideLoading()
      })
    },
    /** 切换船舶 */
    handleShipClick: shakeProof((item, that) => {
      that.currentIndex = item.index
      that.getUnReadNum()
      that.getShipVideo()
      that.getShoreVideoList()
    }, 1000),
    /** 跳转详情 */
    handleJump(item) {
      console.log(item)
      let currentShipInfo = this.shipList[this.currentIndex]
      let alarmTypeId = item.typeId || ''
      let query = `shipName=${currentShipInfo.shipName}&alarmName=${item.alarmTypeName}&alarmTypeId=${alarmTypeId}&shipId=${currentShipInfo.shippingId}`
      uni.navigateTo({
        url: '/subShip/alarm/list/index?' + query,
      })
    },
    getShipList() {
      return getShipList({}).then((res) => {
        console.log('shiplist', res)
        this.shipList = res
        this.currentShipInfo = res[0]
        this.shipNameList = res.map((ship) => {
          return { name: ship.shipName }
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.alarm {
  width: 100vw;
}
.grid {
  padding: 20rpx 20rpx 0;

  .row {
    margin: 0 -10px;
    &::before {
      display: table;
      content: '';
    }
    &::after {
      display: table;
      clear: both;
      content: '';
    }
  }
  .col {
    width: 25%;
    padding: 14rpx;
    float: left;
    box-sizing: border-box;

    .item {
      width: 100%;
      color: #fff;
      background: $uni-color-primary;
      border-radius: 16rpx;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 20rpx 0;
      font-size: 24rpx;
      min-height: 120rpx;
      &:active {
        opacity: 0.8;
      }
      .icon {
        font-size: 60rpx;
        padding: 10rpx 0;
      }
      .extend {
        width: 80%;
        text-align: center;
      }
    }
    .pt6 {
      padding: 13rpx 0;
    }
  }
}
.clear-box {
  &:after {
    content: '';
    clear: both;
    display: table;
  }
}
.clear {
  float: right;
  color: $text-desc-light;
  text-align: right;
  margin: 0 20rpx;
  padding: 10rpx;
  border-radius: 8rpx;
  @include active();
}
.video {
  padding: 0 20rpx 30rpx;
  .title {
    padding: 10rpx 0;
    font-size: 32rpx;
  }
  .item_name {
    padding: 20rpx 0;
  }
  .item_video {
    width: 100%;
    height: 300rpx;
  }
}
.u-row {
  flex-wrap: wrap;
}
</style>
